<template>
 <div class="container">
     <h1>用户信息管理</h1>
     <div class="btn-box">
         <button class="btn" @click="add">新增</button>
     </div>
     <!-- 表格 -->
     <Table :arr="arr" :info="info" @delData="delData" @sendItem="sendItem"/>
     <!-- 弹窗 -->
     <Model :info="info" @sendData="sendData" ref="modelRef"/>
 </div>
</template>

<script>
import Table from '../components/Table.vue'
import Model from '../components/Model.vue'
export default {
    data(){
         return{
             info:{
                 isShow:false,
                //  true 代表新增，false代表编辑
                 isAdd:true
             },
             arr:[
                 {
                     id:1,
                     name:'张三',
                     sex:'male',
                     age:20,
                 },
                 {
                     id:2,
                     name:'李四',
                     sex:'male',
                     age:20,
                 },
                 {
                     id:3,
                     name:'王五',
                     sex:'male',
                     age:20,
                 },
             ]
         }
    },
    created(){},
    methods:{
        add(){
            // 弹框显示
            this.info.isShow = true
            this.info.isAdd = true
        },
        sendData(userInfo){
            let obj = {
                id:this.arr.length==0?1:this.arr[this.arr.length - 1].id + 1,
                name:userInfo.name,
                sex:userInfo.sex,
                age:userInfo.age
            }
            this.arr.push(obj)
        },
        delData(index) {
            this.arr.splice(index,1)
        },
        sendItem(item) {
            this.$refs.modelRef.sendItem(item)
        }
    },
    components:{
        Table,Model
    }
}

</script>
<style scoped>
.btn {
    width: 100px;
    height: 50px;
    border: 0;
    border-radius: 10px;
    font-size: 20px;
    color: #fff;
    background-color: rgb(16, 139, 221);
    cursor: pointer;
}
.container {
    width: 400px;
    margin: 0 auto;
}
.btn-box {
    margin-bottom: 20px;
}
</style>